<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="微信公众号支付" name="微信公众号支付">
						<div class="panel-item" data-title="微信公众号支付">
							<div class="section-title">微信公众号支付</div>
							<!-- <div class="input-item">
								<div class="input-box">
									<div class="label">说明文档</div>
									<div class="val">
										<a class="link-doc" target="_blank“" href="https://kf.qq.com/faq/170830jimmaa170830B7F7NJ.html">
											支付方式介绍和接入方法汇总
										</a>
									</div>
								</div>
							</div> -->
							<div class="input-item">
								<div class="input-box">
									<div class="label">备注</div>
									<div class="val">
										<div class="input-tip">
											设置账号前，请确保您已在微信平台完成相关设置。
										</div>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">启用状态</div>
									<div class="val">
										<el-radio-group v-model="form_1.status" class="column">
											<el-radio :label="1">启用</el-radio>
											<el-radio :label="0">不启用</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">APPID（应用ID）</div>
									<div class="val">
										<el-input clearable="" v-model="form_1.appId" placeholder=""> </el-input>
										<div class="val-tip">获取路径：公众平台-开发者中心</div>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">APPSECRET（应用密钥）</div>
									<div class="val">
										<el-input clearable="" v-model="form_1.appSecret" placeholder="">
										</el-input>
										<div class="val-tip">获取路径：公众平台-开发者中心</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">（MCHID）商户号</div>
									<div class="val">
										<el-input clearable="" v-model="form_1.mchId" placeholder=""> </el-input>
										<div class="val-tip">
											获取路径：商户平台-API安全-API密钥
										</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">（KEY）商户支付密钥</div>
									<div class="val">
										<el-input clearable="" v-model="form_1.key" placeholder=""> </el-input>
										<div class="val-tip">
											获取路径：商户平台-API安全-API密钥
										</div>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">KEY证书</div>
									<div class="val">
										<div class="val-upload">
											<ssl_file_upload uid="form_1@sslKey" @eventCallback="eventCallback" />
										</div>
										<div class="val-tip">
											退款时使用，获取路径：商户平台-api安全
										</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">CERT证书</div>
									<div class="val">
										<div class="val-upload">
											<ssl_file_upload uid="form_1@sslCert" @eventCallback="eventCallback" />
										</div>
										<div class="val-tip">
											退款时使用，获取路径：商户平台-api安全
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane label="微信小程序支付" name="微信小程序支付">
						<div class="panel-item" data-title="微信小程序支付">
							<div class="section-title">微信小程序支付</div>
							<!-- <div class="input-item">
								<div class="input-box">
									<div class="label">说明文档</div>
									<div class="val">
										<a class="link-doc" target="_blank“" href="https://kf.qq.com/faq/170830jimmaa170830B7F7NJ.html">
											支付方式介绍和接入方法汇总
										</a>
									</div>
								</div>
							</div> -->
							<div class="input-item">
								<div class="input-box">
									<div class="label">备注</div>
									<div class="val">
										<div class="input-tip">
											设置账号前，请确保您已在微信平台完成相关设置。
										</div>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">启用状态</div>
									<div class="val">
										<el-radio-group v-model="form_1.status" class="column">
											<el-radio :label="1">启用</el-radio>
											<el-radio :label="0">不启用</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">APPID（应用ID）</div>
									<div class="val">
										<el-input clearable="" v-model="form_3.appId" placeholder=""> </el-input>
										<div class="val-tip">获取路径：公众平台-开发管理</div>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">APPSECRET（应用密钥）</div>
									<div class="val">
										<el-input clearable="" v-model="form_3.appSecret" placeholder="">
										</el-input>
										<div class="val-tip">获取路径：公众平台-开发管理</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">（MCHID）商户号</div>
									<div class="val">
										<el-input clearable="" v-model="form_3.mchId" placeholder=""> </el-input>
										<div class="val-tip">
											获取路径：商户平台-API安全-API密钥
										</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">（KEY）商户支付密钥</div>
									<div class="val">
										<el-input clearable="" v-model="form_3.key" placeholder=""> </el-input>
										<div class="val-tip">
											获取路径：商户平台-API安全-API密钥
										</div>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">KEY证书</div>
									<div class="val">
										<div class="val-upload">
											<ssl_file_upload uid="form_3@sslKey" :upload_params="{type: 'mp_sslKey'}"
												:fileList="fileListMap['mp_sslKey']" @eventCallback="eventCallback" />
										</div>

										<div class="val-tip">
											退款时使用，获取路径：商户平台-api安全
										</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">CERT证书</div>
									<div class="val">
										<div class="val-upload">
											<ssl_file_upload uid="form_3@sslCert" :upload_params="{type: 'mp_sslCert'}"
												:fileList="fileListMap['mp_sslCert']" @eventCallback="eventCallback" />
										</div>
										<div class="val-tip">
											退款时使用，获取路径：商户平台-api安全
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane label="支付宝支付" name="支付宝支付">
						<div class="panel-item" data-title="支付宝支付">
							<div class="section-title">支付宝支付</div>
							<!-- <div class="input-item">
								<div class="input-box">
									<div class="label">说明文档</div>
									<div class="val">
										<a class="link-doc" target="_blank“" href="https://kf.qq.com/faq/170830jimmaa170830B7F7NJ.html">
											支付方式介绍和接入方法汇总
										</a>
									</div>
								</div>
							</div> -->
							<div class="input-item">
								<div class="input-box">
									<div class="label">备注</div>
									<div class="val">
										<div class="input-tip">
											设置账号前，请确保您已在支付宝平台完成相关设置。
										</div>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">启用状态</div>
									<div class="val">
										<el-radio-group v-model="form_2.status" class="column">
											<el-radio :label="1">启用</el-radio>
											<el-radio :label="0">不启用</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>

							<div class="input-item">
								<div class="input-box">
									<div class="label">支付宝企业账户</div>
									<div class="val">
										<el-input clearable="" v-model="form_2.account" placeholder="">
										</el-input>
										<div class="val-tip">获取路径：公众平台-开发管理</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">合作者身份（PARTNER ID）</div>
									<div class="val">
										<el-input clearable="" v-model="form_2.partnerId" placeholder="">
										</el-input>
										<div class="val-tip">获取路径：公众平台-开发管理</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">安全校验码（KEY）</div>
									<div class="val">
										<el-input clearable="" v-model="form_2.key" placeholder=""> </el-input>
										<div class="val-tip">获取路径：公众平台-开发管理</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">商户RSA私钥</div>
									<div class="val">
										<el-input clearable="" v-model="form_2.privateKey" type="textarea" placeholder="">
										</el-input>
										<!-- <div class="val-tip">获取路径：公众平台-开发管理</div> -->
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">支付宝RSA公钥</div>
									<div class="val">
										<el-input clearable="" v-model="form_2.publicKey" type="textarea" placeholder="">
										</el-input>
										<!-- <div class="val-tip">获取路径：公众平台-开发管理</div> -->
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane label="Paypal支付" name="Paypal支付">
						<div class="panel-item" data-title="Paypal支付">
							<div class="section-title">Paypal支付</div>

							<payment_paypal />


							<div class="panel-1" v-if="false">
								<div class="section-title">Paypal支付</div>
								<!-- <div class="input-item">
										<div class="input-box">
											<div class="label">说明文档</div>
											<div class="val">
												<a class="link-doc" target="_blank“" href="https://kf.qq.com/faq/170830jimmaa170830B7F7NJ.html">
													支付方式介绍和接入方法汇总
												</a>
											</div>
										</div>
									</div> -->
								<div class="input-item">
									<div class="input-box">
										<div class="label">备注</div>
										<div class="val">
											<div class="input-tip">
												设置账号前，请确保您已在PayPal平台完成相关设置。
											</div>
										</div>
									</div>
								</div>

								<div class="input-item">
									<div class="input-box">
										<div class="label">启用状态</div>
										<div class="val">
											<el-radio-group v-model="form_4.status" class="column">
												<el-radio :label="1">启用</el-radio>
												<el-radio :label="0">不启用</el-radio>
											</el-radio-group>
										</div>
									</div>
								</div>
								<div class="input-item">
									<div class="input-box">
										<div class="label">环境</div>
										<div class="val">
											<el-radio-group v-model="form_4.mode" class="column">
												<el-radio :label="1">正式环境</el-radio>
												<el-radio :label="0">沙盒环境</el-radio>
											</el-radio-group>
										</div>
									</div>
								</div>
								<div class="input-item">
									<div class="input-box">
										<div class="label">CURRENCY (货币)</div>
										<div class="val">
											<el-input clearable="" v-model="form_4.currency" placeholder="">
											</el-input>
											<!-- <div class="val-tip">获取路径：公众平台-开发管理</div> -->
										</div>
									</div>
								</div>
								
								<div class="input-item">
									<div class="input-box">
										<div class="label">CLIENTID（应用ID）</div>
										<div class="val">
											<el-input clearable="" v-model="form_4.clientId" type="input" placeholder="">
											</el-input>
										</div>
									</div>
								</div>
								<div class="input-item">
									<div class="input-box">
										<div class="label">CLIENTSECRET（秘钥）</div>
										<div class="val">
											<el-input clearable="" v-model="form_4.clientSecret" type="input" placeholder="">
											</el-input>
										</div>
									</div>
								</div>
								<div class="input-item">
									<div class="input-box">
										<div class="label">CALL BACK (回调地址)</div>
										<div class="val">
											<el-input clearable="" v-model="form_4.acceptUrl" placeholder="">
											</el-input>
										</div>
									</div>
								</div>

								<div class="input-item">
									<div class="input-box">
										<div class="label">LOCATION URL (跳转地址)</div>
										<div class="val">
											<el-input clearable="" v-model="form_4.locationUrl" placeholder="">
											</el-input>
											<!-- <div class="val-tip">获取路径：公众平台-开发管理</div> -->
										</div>
									</div>
								</div>
							</div>


						</div>
					</el-tab-pane>

					<el-tab-pane label="Stripe支付" name="Stripe支付">
						<div class="panel-item" data-title="Stripe支付">
							<div class="section-title">Stripe签约信息</div>
							<!-- <div class="input-item">
								<div class="input-box">
									<div class="label">说明文档</div>
									<div class="val">
										<a class="link-doc" target="_blank“" href="https://kf.qq.com/faq/170830jimmaa170830B7F7NJ.html">
											支付方式介绍和接入方法汇总
										</a>
									</div>
								</div>
							</div> -->
							<div class="input-item">
								<div class="input-box">
									<div class="label">备注</div>
									<div class="val">
										<div class="input-tip">
											设置账号前，请确保您已在Stripe平台完成相关设置。
										</div>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">启用状态</div>
									<div class="val">
										<el-radio-group v-model="form_4.status" class="column">
											<el-radio :label="1">启用</el-radio>
											<el-radio :label="0">不启用</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">KEY（秘钥）</div>
									<div class="val">
										<el-input clearable="" v-model="form_5.key" placeholder=""> </el-input>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">PAY URL (下单地址)</div>
									<div class="val">
										<el-input clearable="" v-model="form_5.payUrl" placeholder="">
										</el-input>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">SEARCH URL (搜索地址)</div>
									<div class="val">
										<el-input clearable="" v-model="form_5.searchUrl" placeholder="">
										</el-input>
									</div>
								</div>
							</div>
							<div class="input-item">
								<div class="input-box">
									<div class="label">CURRENCY (货币)</div>
									<div class="val">
										<el-input clearable="" v-model="form_5.currency" placeholder="">
										</el-input>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>

				<!-- <div class="panel-item">
          <div class="input-item">
            <div class="input-box">
              <div class="label" style="visibility: hidden">-</div>
              <div class="val">
                <div class="save-box">
                  <el-button type="primary" @click="doSave()"> 保存 </el-button>
                </div>
              </div>
            </div>
          </div>
        </div> -->
			</div>

			<div class="fixed-bottom-btns">
				<el-button size="medium" type="primary" @click="doSave()"> 保存 </el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import ssl_file_upload from "@/components/file/ssl_file_upload.vue";
	import payment_paypal from "./payment-paypal.vue";

	import {
		mapState
	} from "vuex";
	export default {
		name: "news",
		components: {
			ssl_file_upload,
			payment_paypal
		},
		data() {
			return {
				activeName: "微信公众号支付", //类型：0-全部 1-微信公众号 2-支付宝账号 3-微信小程序 4-paypal支付 5-stripe信用卡
				nameNumberMap: {
					'微信公众号支付': '1',
					'微信小程序支付': '2',
					'支付宝支付': '3',
					'Paypal支付': '4',
					'Stripe支付': '5',
				},
				payList: [],

				//微信公众号支付
				form_1: {
					// action: "action", //请求方法
					// token: "token", //
					id: "", //在线支付id =0 创建 >0 修改
					type: "1", //类型：1-微信公众号
					appId: "", //公众号-APPID
					appSecret: "", //公众号-应用秘钥
					mchId: "", //商户号
					key: "", //商户支付密钥
					sslKey: "", //商户支付key证书
					sslCert: "", //商户支付Cert证书
					status: "1", //状态 ：0-禁用 1-启用
					title: "公众号支付", //标题
				},
				//支付宝支付
				form_2: {
					// action: "", //请求方法
					// token: "", //
					id: "", //在线支付id =0 创建 >0 修改
					type: "", //类型：1-微信公众号 2-支付宝账号
					account: "", //支付宝企业账户
					partnerId: "", //合作者身份（Partner ID）
					key: "", //安全校验码（Key）
					privateKey: "", //商户RSA私钥
					publicKey: "", //支付宝RSA公钥
					status: "", //状态 ：0-禁用 1-启用
					title: "", //标题
				},
				//微信小程序支付
				form_3: {
					// action: "", //请求方法
					// token: "", //
					id: "", //在线支付id =0 创建 >0 修改
					type: "3", //类型：1-微信公众号 2-支付宝 3-微信小程序
					appId: "", //小程序-APPID
					appSecret: "", //小程序-应用秘钥
					mchId: "", //商户号
					key: "", //商户支付密钥
					sslKey: "", //商户支付key证书
					sslCert: "", //商户支付Cert证书
					status: "", //状态 ：0-禁用 1-启用
					title: "", //标题
				},
				//paypal
				form_4: {
					// action: "", //请求方法
					// token: "", //
					id: "", //在线支付id =0 创建 >0 修改
					type: "", //类型：1-微信公众号 2-支付宝账号 3-微信小程序 4-paypal支付
					clientId: "", //应用ID
					clientSecret: "", //秘钥
					acceptUrl: "", //Call Back (回调地址)
					locationUrl: "", //Location Url (跳转地址)
					currency: "", //货币 币种
					mode: "", //环境：0-沙盒sandbox 1-正式live
					status: "", //状态 ：0-禁用 1-启用
					title: "", //标题
				},
				//stripe
				form_5: {
					// action: "", //请求方法
					// token: "", //
					id: "", //在线支付id =0 创建 >0 修改
					type: "", //类型：1-微信公众号 2-支付宝账号 3-微信小程序 4-paypal支付 5-stripe信用卡
					key: "", //秘钥
					payUrl: "", //下单地址
					searchUrl: "", //搜索地址
					currency: "", //货币 币种
					status: "", //状态 ：0-禁用 1-启用
					title: "", //标题
				},

				form: {},

				// 标签
				tagList: [],
				tagInputVisible: false,
				tagInputValue: "",
				tagInputRef: "tagInputRef",
				// 标签



				fileListMap: {
					'mp_sslKey': [],
					'mp_sslKey': [],
				}
			};
		},
		computed: {},
		watch: {},
		created() {
			this.setView();
		},
		mounted() {},
		methods: {
			setView() {
				this.$api({
					url: '/admin_service.php',
					method: "get",
					data: {
						action: "setting_getOnlineList",
					},
				}).then((res) => {
					let data = res.data;
					if (res.code == 200) {
						this.payList = res.data.list;
						this.queryDetail();
					}
				});
			},

			queryDetail() {
				let promise_arr = [];
				this.payList.forEach((v) => {
					let promise = this.$api({
						url: '/admin_service.php',
						method: "get",
						data: {
							action: "setting_getOnlineInfo",
							id: v.id,
						}
					});
					promise_arr.push(promise);
				});
				Promise.all(promise_arr).then((resAll) => {
					this.$logjson("支付配置 resAll", resAll);

					//类型：0-全部 1-微信公众号 2-支付宝账号 3-微信小程序 4-paypal支付 5-stripe信用卡
					let pay_weixin_gongzhonghao = resAll.find((v) => v.data.type == 1);
					let pay_zhifubao = resAll.find((v) => v.data.type == 2);
					let pay_weixin_xiaochengxu = resAll.find((v) => v.data.type == 3);
					let pay_paypal = resAll.find((v) => v.data.type == 4);
					let pay_stripe = resAll.find((v) => v.data.type == 5);

					//1 微信公众号支付
					if (pay_weixin_gongzhonghao) {
						let item = pay_weixin_gongzhonghao.data;
						let info = item.info;
						this.form_1 = {
							id: item.id || "",
							type: item.type || "",
							status: item.status || "",
							title: item.title || "",
							//
							appId: info.appId || "",
							appSecret: info.appSecret || "",
							mchId: info.mchId || "",
							key: info.key || "",
							sslKey: info.sslKey || "",
							sslCert: info.sslCert || "",
						};
					}

					//3 微信小程序支付
					if (pay_weixin_xiaochengxu) {
						let item = pay_weixin_xiaochengxu.data;
						let info = item.info;
						this.form_3 = {
							id: item.id || "",
							type: item.type || "",
							status: item.status || "",
							title: item.title || "",
							//
							appId: info.appId || "",
							appSecret: info.appSecret || "",
							mchId: info.mchId || "",
							key: info.key || "",
							sslKey: info.sslKey || "",
							sslCert: info.sslCert || "",
						};

						if (info.sslKey) {
							this.fileListMap['mp_sslKey'] = [{
								name: info.sslKey,
								url: info.sslKey,
							}]
						}

						if (info.sslCert) {
							this.fileListMap['mp_sslCert'] = [{
								name: info.sslCert,
								url: info.sslCert,
							}]
						}
					}

					//2 支付宝支付
					if (pay_zhifubao) {
						let item = pay_zhifubao.data;
						let info = item.info;
						this.form_2 = {
							id: item.id || "",
							type: item.type || "",
							status: item.status || "",
							title: item.title || "",
							//
							account: info.account || "",
							partnerId: info.partnerId || "",
							key: info.key || "",
							privateKey: info.privateKey || "",
							publicKey: info.publicKey || "",
						};
					}

					//4 Paypal
					if (pay_paypal) {
						let item = pay_paypal.data;
						let info = item.info;
						this.form_4 = {
							id: item.id || "",
							type: item.type || "",
							status: item.status || "",
							title: item.title || "",
							//
							clientId: info.clientId || "",
							clientSecret: info.clientSecret || "",
							acceptUrl: info.acceptUrl || "",
							locationUrl: info.locationUrl || "",
							currency: info.currency || "",
							mode: +info.mode || 0,
						};

						this.$log('paypal支付', item)
						this.$log('paypal支付', this.form_4)
					}

					//5 stripe
					if (pay_stripe) {
						let item = pay_stripe.data;
						let info = item.info;
						this.form_5 = {
							id: item.id || "",
							type: item.type || "",
							status: item.status || "",
							title: item.title || "",
							//
							key: info.key || "",
							payUrl: info.payUrl || "",
							searchUrl: info.searchUrl || "",
							currency: info.currency || "",
						};
					}
				});
			},

			doSave() {
				let number = this.nameNumberMap[this.activeName]
				if (number == 1) {
					this.do_save_payment(this.form_1)
					// this.do_save_weixin_h5();
				} else if (number == 2) {
					this.do_save_payment(this.form_3)
					// this.do_save_weixin_mp();
				} else if (number == 3) {
					this.do_save_payment(this.form_2)
					// this.do_save_alipay();
				} else if (number == 4) {
					this.do_save_payment(this.form_4)
					// this.do_save_paypal();
				} else if (number == 5) {
					this.do_save_payment({
						...this.form_5,
						type: 5
					})
					// this.do_save_stripe();
				}
			},


			do_save_payment(form) {
				this.$api({
					url: '/admin_service.php',
					method: "get",
					data: {
						action: "setting_saveOnline",
						...form,
					}
				}).then((res) => {
					alert(res);
				});
			},



			// do_save_weixin_h5() {
			// 	this.$api({
			// 		url: '/admin_service.php',
			// 		method: "get",
			// 		data: {
			// 			action: "setting_saveOnline",
			// 			...this.form_1,
			// 		}
			// 	}).then((res) => {
			// 		alert(res);
			// 	});
			// },
			// do_save_weixin_mp() {
			// 	this.$api({
			// 		url: '/admin_service.php',
			// 		method: "get",
			// 		data: {
			// 			action: "setting_saveOnline",
			// 			...this.form_3,
			// 		}
			// 	}).then((res) => {
			// 		alert(res);
			// 	});
			// },
			// do_save_alipay() {
			// 	this.$api({
			// 		url: '/admin_service.php',
			// 		method: "get",
			// 		data: {
			// 			action: "setting_saveOnline",
			// 			...this.form_2,
			// 		}
			// 	}).then((res) => {
			// 		alert(res);
			// 	});
			// },
			// do_save_paypal() {
			// 	this.$api({
			// 		url: '/admin_service.php',
			// 		method: "get",
			// 		data: {
			// 			action: "setting_saveOnline",
			// 			...this.form_1,
			// 		}
			// 	}).then((res) => {
			// 		alert(res);
			// 	});
			// },
			// do_save_stripe() {
			// 	this.$api({
			// 		url: '/admin_service.php',
			// 		method: "get",
			// 		data: {
			// 			action: "setting_saveOnline",
			// 			...this.form_1,
			// 		}
			// 	}).then((res) => {
			// 		alert(res);
			// 	});
			// },



			eventCallback(option) {
				let {
					type,
					uid,
					data
				} = option;
				if (type == "文件上传成功") {
					let infoList = uid.split("@");
					let [formName, colName] = infoList;
					this[formName][colName] = data.url;
				}
			},

			// 标签列表
			tagClose(tag) {
				this.tagList.splice(this.tagList.indexOf(tag), 1);
			},
			tagShowInput() {
				this.tagInputVisible = true;

				setTimeout(() => {
					this.$nextTick(() => {
						// this.$refs["tagInputRef"].$refs.input.focus();
						this.$refs["tagInputRef"][0].$refs.input.focus();
					});
				}, 50);
			},
			tagInputConfirm() {
				let tagInputValue = this.tagInputValue.trim();
				if (tagInputValue) {
					if (this.tagList.includes(tagInputValue)) {
						alertErr("型号已存在！");
						// return
					} else {
						this.tagList.push(tagInputValue);
					}
				}
				this.tagInputVisible = false;
				this.tagInputValue = "";
			},
			// 标签列表

			handleClick(tab, event) {
				// console.log(tab);
				// console.log(event);
				console.log(this.activeName);



			},
		},
	};
</script>

<style scoped lang="less">
	// .el-radio-group.column {
	//   display: flex;
	//   flex-direction: column;
	// }
	.fixed-bottom-btns {
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;

	}


	.el-radio {
		line-height: 32px;
	}

	.tip-input {
		margin-left: 20px;
		display: inline-block;
		max-width: 150px;
	}

	.time-divider {
		margin: 0 15px;
	}

	.page-wrap {
		.page-inner {}
	}

	.page-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	.section-title {
		margin-bottom: 20px;
		width: 100%;
		height: auto;
		line-height: 46px;
		background: rgb(241, 242, 245);
		padding-left: 30px;
		font-size: 16px;
		font-weight: 600;
	}

	.panel-item {
		padding-bottom: 100px;
		// .flex();
		// flex-wrap: wrap;

		.input-item {
			margin-bottom: 20px;
			width: 100%;
			max-width: 800px;
			// width: 50%;

			&.hidden-item {
				display: none;
			}

			&:last-child {
				margin-bottom: 0;
			}

			.input-box {
				width: 100%;
				display: flex;
				align-items: flex-start;

				.label {
					height: 32px;
					line-height: 32px;
					min-width: 160px;
					min-width: 200px;
					// min-width: 100px;
					text-align: right;
					margin-right: 40px;
					margin-right: 20px;
					font-size: 20px;
					font-size: 14px;
					font-family: PingFang SC;
					color: #666666;

					&.required {
						position: relative;

						&:after {
							content: "*";
							color: #f00;
							position: absolute;
							right: -15px;
							top: 3px;
							// font-weight: bold;
						}
					}

					&.hidden {
						visibility: hidden;
					}
				}
			}

			//输入框组
			.inputs {
				.flex();

				.date-box {
					flex: 1;
				}

				.shuru-box {
					margin-left: 20px;
					flex: 4;
				}
			}

			.val {
				flex: 2;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666;

				.shuru {
					width: 100%;
					padding-left: 20px;
					outline: none;
					height: 40px;
					background: #ffffff;
					border: 1px solid #d4d8eb;
					border-radius: 4px;
					font-size: 16px;
				}

				.form-ele {
					.el-input {
						width: 100%;
					}

					.el-select {
						width: 100%;
					}

					.el-cascader {
						width: 100%;
					}
				}

				.input-tip {
					line-height: 32px;
					font-size: 14px;
					font-family: PingFang SC;
					color: #666;
				}
			}
		}
	}

	// 标签
	.tag-wrap {

		// 标签样式
		.cus-tag-item {
			margin-right: 15px;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.button-new-tag {
			margin-left: 10px;
			height: 32px;
			line-height: 30px;
			padding-top: 0;
			padding-bottom: 0;
		}

		.input-new-tag {
			width: 90px;
			margin-left: 10px;
			vertical-align: bottom;
		}

		.cus-tag-input {
			-webkit-appearance: none;
			background-color: #fff;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			outline: 0;
			padding: 0 15px;
			width: 90px;
			height: 32px;
			line-height: 32px;
			transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

			&:focus {
				border-color: #66b1ff;
			}
		}

		// 标签样式

		.table-box {
			width: 100%;
			border-collapse: 0;
			/* table-layout: fixed; */
			border: 1px solid #eee;
			font-size: 14px;
		}

		.table-box tr {
			/* min-height: 40px; */
		}

		.table-box th {
			text-align: left;
			padding: 10px 10px;

			border-right: 1px solid #eee;
		}

		.table-box td {
			text-align: left;
			padding: 10px 10px;
			border-top: 1px solid #eee;
			border-right: 1px solid #eee;
		}

		.table-box td:nth-child(1) {
			width: 20%;
		}

		.table-box td:nth-child(2) {
			width: 80%;
		}

		.table-box .tag-item {
			cursor: pointer;
			outline: none;
			user-select: none;
			margin-right: 10px;
			display: inline-flex;
			align-items: center;
			color: #333;
		}

		.table-box .tag-item:before {
			content: "";
			width: 20px;
			height: 20px;
			display: inline-block;
			background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			margin-right: 3px;
		}

		.table-box .tag-item.checked:before {
			background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
		}
	}

	.link-doc {
		line-height: 32px;
		display: block;
		width: fit-content;
		font-size: 14px;
		color: @theme;
	}

	.val-tip {
		margin-top: 5px;
		font-size: 12px;
		font-weight: normal;
	}
</style>